<template>
  <Modal
    v-model="showEditTestsuiteModal"
    title="编辑场景"
    width="50"
    :mask-closable="false"
    @on-cancel="handleEditTestsuiteCancel"
  >
    <Tabs name="testsuite-edit-tabs" :animated="true">
      <TabPane label="基础信息" tab="testsuite-edit-tabs">
        <Form
          label-position="right"
          :label-width="150"
          ref="testsuiteForm"
          :model="testsuiteForm"
          :rules="testsuiteValidate"
        >
          <FormItem label="场景名称" prop="name">
            <Input clearable v-model="testsuiteForm.name" />
          </FormItem>
          <FormItem label="所属项目" prop="project">
            <Select
              v-model="testsuiteForm.project"
              filterable
              clearable
              :disabled="testsuiteForm.hasTestcase"
            >
              <Option
                v-for="item in projects"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="开启/关闭私有环境" prop="enable_private_env">
            <i-switch
              true-color="#13ce66"
              false-color="#ff4949"
              size="large"
              v-model="testsuiteForm.enable_private_env"
            >
              <span slot="open">开启</span>
              <span slot="close">关闭</span>
            </i-switch>
          </FormItem>
          <FormItem label="私有环境">
            <Select
              v-model="testsuiteForm.private_environment"
              clearable
              filterable
              placeholder="请先选择所属项目"
            >
              <Option
                v-for="item in project_envs"
                :value="item.id"
                :key="item.id"
                :label="item.name"
              >
                <span>{{ item.name }}</span>
                <span style="float: right; color: #ccc">{{
                  item.base_url
                }}</span>
              </Option>
            </Select>
          </FormItem>
          <FormItem label="备注">
            <Input
              type="textarea"
              clearable
              v-model="testsuiteForm.remark"
              :rows="10"
            />
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="全局参数配置" tab="testsuite-edit-tabs">
        <JsonEditor
          v-model="testsuiteForm.global_variables"
          jsonEditorId="editTestsuiteGlobalVariables"
          style="height: 500px"
        ></JsonEditor>
      </TabPane>
    </Tabs>
    <div slot="footer">
      <Button type="default" @click="handleEditTestsuiteCancel">取消</Button>
      <Button type="primary" @click="handleEditTestsuiteSubmit('testsuiteForm')"
        >确定</Button
      >
    </div>
  </Modal>
</template>

<script>
import JsonEditor from "_c/json-editor";
import { updateTestsuite } from "@/api/HttpAutoTestService/testsuite";
import { getProjectNames } from "@/api/HttpAutoTestService/project";
import { getEnvNames } from "@/api/HttpAutoTestService/environment";

export default {
  name: "testsuite-edit",
  components: {
    JsonEditor,
  },
  props: {
    editTestsuite: {
      type: Boolean,
      default: false,
    },
    testsuite: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    showEditTestsuiteModal: {
      get() {
        return this.editTestsuite;
      },
      set(val) {
        this.$emit("update:editTestsuite", val);
        this.$emit("update:testsuite", {});
      },
    },
  },
  watch: {
    editTestsuite(val) {
      if (val) {
        getProjectNames()
          .then((res) => {
            this.projects = res.data;
          })
          .catch((err) => {
            this.$Modal.error({
              title: "系统异常，请联系管理员……",
              content: JSON.stringify(err),
              closable: true,
            });
          });
      }
    },
    testsuite(val) {
      if (this.showEditTestsuiteModal) {
        this.testsuiteForm = { ...val };
        // 获取项目环境
        getEnvNames({ project: this.testsuiteForm.project }).then((res) => {
          this.project_envs = res.data;
        });
      }
    },
  },
  data() {
    return {
      projects: [],
      project_envs: [],
      testsuiteForm: {
        id: "",
        name: "",
        project: "",
        enable_private_env: false,
        private_environment: "",
        remark: "",
        global_variables: {},
      },
      testsuiteValidate: {
        name: [{ required: true, message: "请输入场景名称", trigger: "blur" }],
        project: [
          { required: true, message: "请选择所属项目", trigger: "change" },
        ],
        enable_private_env: [
          {
            required: true,
            message: "请选择开启/关闭私有环境",
            trigger: "change",
            type: "boolean",
          },
        ],
      },
    };
  },
  methods: {
    handleEditTestsuiteCancel() {
      this.showEditTestsuiteModal = false;
      this.testsuiteForm = {
        id: "",
        name: "",
        project: "",
        enable_private_env: false,
        private_environment: "",
        remark: "",
        global_variables: {},
      };
      this.$emit("initTestsuiteTable");
      this.$refs["testsuiteForm"].resetFields();
    },
    handleEditTestsuiteSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let testsuiteForm = { ...this.testsuiteForm };
          if (testsuiteForm.private_environment === undefined) {
            testsuiteForm.private_environment = "";
          }
          if (testsuiteForm.global_variables === "") {
            testsuiteForm.global_variables = {};
          }

          updateTestsuite(testsuiteForm)
            .then((res) => {
              if (res.status === 200) {
                this.$Message.info("修改成功");
                this.handleEditTestsuiteCancel();
              } else {
                this.$Message.error("修改失败");
              }
            })
            .catch((err) => {
              this.$Modal.error({
                title: "系统异常，请联系管理员……",
                content: JSON.stringify(err),
                closable: true,
              });
            });
        }
      });
    },
  },
};
</script>

<style>
</style>

